<template>
  <div class="sales">
    <el-card>
      <CommonCard title="今日订单" :value="numberFormat(orderToday)">
        <template #default>
          <div ref="main" style="width: 100%; height: 100%"></div>
        </template>

        <template #footer
          >昨日订单量<span class="bro">¥{{ moneyFormat(orderLastDay) }}</span></template
        >
      </CommonCard>
    </el-card>
  </div>
</template>

<script lang="ts">
import CommonCard from "./CommonCard.vue"
export default {
  name: "todayOrder",
  components: {
    CommonCard,
  },
}
</script>
<script lang="ts" setup>
import * as echarts from "echarts"
import { ref, onMounted, computed, watch } from "vue"
import { useReportData } from "@/stores/reportData" // 引入小菠萝获取数据
import type { EChartsType } from "echarts"
import useFormat from "@/hooks/useFormat"
// 对格式化数据的函数进行解构
const { numberFormat, moneyFormat } = useFormat()
// 这个页面完成后,发现第一控制台警告,显示说期望得到一个string,但是是number,这是公共组件插槽中定义props的type类型推断的,先不管
// 第二,发现页面中的数据与预期出入,预期要一个英文类型的数据,就是某位开始,每隔3个数字加一个逗号,我们可以在hook中定义一个函数,来对数据进行处理

let myChart: EChartsType
// 创建pinia实例
const reportDataStore = useReportData()
// 使用计算属性来获取对应的数据值
// A. 今日订单
const orderToday = computed(() => reportDataStore.reportData.orderToday)
// B. 昨日订单
const orderLastDay = computed(() => reportDataStore.reportData.orderLastDay)
// C. 订单趋势 订单动态
const orderTrend = computed(() => reportDataStore.reportData.orderTrend)
// D. X轴数据
const orderTrendAxis = computed(() => reportDataStore.reportData.orderUserTrendAxis)

// vue3中获取dom对象的方法
const main = ref()

// 出現問題,由於setup执行时机非常早,我们需要确保拿到main,所以我们使用一个函数包裹起来,等到页面挂载完毕后在去获取

const getOption = () => {
  return {
    xAxis: {
      boundaryGap: false, // 两侧不留空白
      // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] // x轴数据列表
      data: orderTrendAxis.value,
    },
    yAxis: {
      // 不显示Y轴的数值
      show: false,
    },
    series: [
      {
        name: "实时订单数",
        type: "line",
        // 列表数据
        // data: orderTrend.value,
        // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
        data: orderTrend.value,
        // 曲线平滑
        smooth: true,
        // 设置区域样式 来代替折线
        areaStyle: {
          color: "purple",
        },
        // 折线点的样式
        itemStyle: {
          opacity: 0,
        },
        // // 线的样式
        lineStyle: {
          opacity: 0,
        },
      },
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    //  显示提示
    tooltip: {
      trigger: "axis",
      confine: true,
    },
  }
}

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(main.value)
  // 此时能拿到maindom,调用函数getoptions,获取对应的配置项
  // myChart.setOption(getOption())
  // 问题:在进行响应式布局时,会有改变页面大小的情况,而一旦改变大小,图表中的数据就会被超出隐藏掉,不是我们想要的
  // 于是我们找到echarts中的响应式布局,发现有一个当容器大小改变时,图标的大小随之改变.通过监听window中的onresize事件,一旦window的大小变化触发这个函数,进而触发改变图表的函数
  //   dom二级事件方法
  // window.onresize = function () {
  //   // console.log(123)
  //   myChart && myChart.resize()
  // }
  //   dom0级事件方法
  // 当浏览器宽度发生变化的时候，图表也要发生变化
  window.addEventListener("resize", () => {
    myChart && myChart.resize()
  })
})

watch(orderToday, () => {
  myChart.setOption(getOption())
})
</script>

<style></style>
